<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .search {
        text-align: center;
        padding: 20px;
      }
      input {
        width: 40px;
      }
      table {
        margin: auto;
        border-spacing: 0;
        width: 400px;
        border: 1px solid black;
      }
      th {
        border: 1px solid black;
      }
      td {
        border: 1px solid black;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="search">
      按照价格查询：<input type="text" class="start" /> -
      <input type="text" class="end" />
      <button class="search-price">搜素</button>按照商品名称查询：<input
        type="text"
        class="product"
      />
      <button class="search-pro">查询</button>
    </div>
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>产品名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      var data = [
        {
          id: 1,
          pname: "小米",
          price: 3999,
        },
        {
          id: 2,
          pname: "oppo",
          price: 999,
        },
        {
          id: 3,
          pname: "荣耀",
          price: 1299,
        },
        {
          id: 4,
          pname: "华为",
          price: 1999,
        },
      ];
      var tbody = document.querySelector("tbody");
      var search_price = document.querySelector(".search-price");
      var start = document.querySelector(".start");
      var end = document.querySelector(".end");
      var product = document.querySelector(".product");
      var search_pro = document.querySelector(".search-pro");
      setDate(data);
      function setDate(mydata) {
        tbody.innerHTML = "";
        mydata.forEach(function (value) {
          var tr = document.createElement("tr");
          tr.innerHTML =
            "<td>" +
            value.id +
            "</td><td>" +
            value.pname +
            "</td><td>" +
            value.price +
            "</td>";
          tbody.appendChild(tr);
        });
      }

      search_price.addEventListener("click", function () {
        var newDate = data.filter(function (value) {
          return value.price >= start.value && value.price <= end.value;
        });
        console.log(newDate);
        setDate(newDate);
      });
      search_pro.addEventListener("click", function () {
        var arr = [];
        data.some(function (value) {
          if (value.pname === product.value) {
            arr.push(value);
            return true;
          }
        });
        setDate(arr);
      });
    </script>
  </body>
</html>
